<template>
<div class="u-panel">
  <div v-if="dataList && dataList.length > 0" class="fb-box">
    <batch-opr :indeterminateFlag="isIndeterminate" :checkAll="checkAll" @batchDel="del" @handleAllCheck="handleAllCheck" />
    <el-checkbox-group v-model="selectIds" @change="handleCheckedChange">
      <el-checkbox :label="item.id" :key="item.id" class="fbi-box" v-for="(item) in dataList">
        <div class="div-box">
          <div class="resource-box">
            <el-tag type="info">{{ dims.SCS_SOURCES_TYPE[item.source] }}</el-tag>
            <el-tag type="info">{{ dims.FEEDBACK_TYPE[item.type] }}</el-tag>
          </div>
          <div class="status-box">
            <el-tag :type="getTagType(item.status)">{{ dims.DEAL_WITH_STATUS[item.status] }}</el-tag>
          </div>
          <div class="img-note-box">
            <img :src="item.img" @click="sa.showImage(item.img, '800px', '600px')" alt="" />
            <div class="note-box" @click="add(item)">
              {{ item.note }}
            </div>
          </div>
          <div class="time-box">
            <span>{{ item.createTime }}</span>
          </div>
        </div>
      </el-checkbox>
    </el-checkbox-group>
  </div>
  <div class="fb-box" v-else>
    <div class="c-no-data">
      暂无数据
    </div>
  </div>
  <div class="btn-panel" @click="add()">
    <span>
      <svg-icon icon-class="alarm_warning"></svg-icon>
      反馈
    </span>
  </div>
</div>
</template>

<script>
import sa from '@/sa-frame/sa';
import router from '@/router';
import settings from '@/settings';
import mutiLine from '@/mixins/text-line';
import batchOpr from '@/components/batch-opr'
export default {
  name: 'u-feedback',
  mixins: [mutiLine],
  data() {
    return {
      dataList: [],
      dims: sa.$sys.getCurd(),
      selectIds: [],
      checkAll: false,
      isIndeterminate: false
    }
  },
  components: {
    batchOpr
  },
  created: function () {
    this.f5();
    // 监听回车执行查询
    sa.onInputEnter();
  },
  methods: {
    // 获取当前用户
    f5: function () {
      if (sa.$sys.getToken()) {
        sa.ajax('/feedback/getList', {
          uid: sa.$sys.getCurUser().id
        }, function (res) {
          if (res.code === 200) {
            this.dataList = res.data;
            this.isIndeterminate = false
          }
          // 刷新表格高度
          sa.f5TableHeight();
        }.bind(this), {
          type: "post"
        });
      } else {
        router.replace(settings.scs_home)
      }
    },

    //反馈
    add(item) {
      sa.showModel('意见反馈', () => import('@/views/scs/apply/feedback'), {
        item: item || {}
      });
    },

    // 获取标签样式
    getTagType(status) {
      return status === 0 ? '' : (1 === status ? 'success' : 'warning')
    },

    // 删除
    del() {
      if (this.selectIds.length <= 0) {
        sa.msg("请选择至少一条数据！")
        return
      }
      sa.confirm('是否删除，此操作不可撤销', function () {
        sa.ajax('/feedback/deleteByIds', {
          ids: this.selectIds
        }, function (res) {
          sa.ok(res.msg);
          this.f5();
        }.bind(this), {
          type: 'post'
        })
      }.bind(this));
    },

    // 全选
    handleAllCheck() {
      if (this.checkAll) {
        this.selectIds = []
      } else {
        this.dataList.forEach(item => {
          this.selectIds.push(item.id)
        })
      }
      this.checkAll = !this.checkAll
      this.isIndeterminate = this.checkall;
    },
    // 处理选中
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.dataList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataList.length;
    }
  },

}
</script>

<style scoped>
img {
  max-width: 36px;
  max-height: 36px;
  object-fit: fill;
}

.u-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  position: relative;
}

.fb-opr-box {
  padding: 0px 5px;
}

.fb-box {
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
  border-radius: 5px;
  overflow: auto;
}

.el-checkbox-group {
  padding: 0px 5px;
}

.fbi-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  border-radius: 5px;
  margin: 5px 0px;
  cursor: pointer;
  position: relative;

  &:hover {
    transition: all 0.5s;
    box-shadow: 0px 0px 2px 1px #f1f1f1;
    transform: translate(0%, 2%);
  }
}

::v-deep .el-checkbox__input {
  display: flex;
  align-items: center;
  width: 20px;
}

::v-deep .el-checkbox__label {
  display: flex;
  width: calc(100% - 20px);
  padding: 0px 5px;
}

.div-box {
  display: flex;
  width: 100%;
}

.resource-box,
.status-box,
.img-note-box,
.time-box {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.resource-box {
  justify-content: space-between;
  width: 10%;
  padding: 0px 5px;
}

.status-box {
  width: 5%;
}

.el-tag {
  margin: 0px 2px;
  color: #aaaaaa;
}

.img-note-box {
  width: 70%;
}

.time-box {
  color: #aaaaaa;
  width: 15%;
}

.note-box {
  color: #aaaaaa;
  margin: 5px 0px;
  line-height: 36px;
  height: 36px;
  width: 100%;
  padding: 2px;
  text-align: start;
  letter-spacing: 1px;
  text-indent: 1em;
  /* 隐藏超出部分 */
  overflow: hidden;
  /* 显示省略号 */
  text-overflow: ellipsis;
  /* 允许文本换行 */
  white-space: nowrap;
}

.c-no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  text-align: center;
  color: #aaaaaa;
}

.btn-panel {
  display: flex;
  width: 65px;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10px;
  top: 5px;
  height: 30px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 0px 2px 0px #e0e0e0;
  background: #cbcbcb;

  &:hover {
    box-shadow: 0px 0px 4px 0px #a3a2a2;
    background: #00335a;
    color: #ffffff;

    .svg-icon {
      color: #ff6f00;
    }
  }
}
</style>
